<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">常用正则</h2>
      </div>
      <table class="table table-bordered table-striped table-hover">
        <thead>
          <tr>
            <th>功能</th>
            <th>规则</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in regs" :key="item.text">
            <td>{{item.text}}</td>
            <td>{{item.reg}}</td>
          </tr>
        </tbody>
      </table>
      <div class="form-group mt-md">
        <label class="form-label">测试正则:</label>
        <input type="text" class="form-input" placeholder="正则表达式，例如：/[a-zA-Z]/ig" v-model="reg" />
      </div>
      <div class="form-group mt-md">
        <label class="form-label">测试字符:</label>
        <input type="text" class="form-input mt-sm" placeholder="字符串" v-model="value" />
      </div>
      <div class="form-group mt-md">
        <button class="btn btn-theme" type="button" @click="run">执行测试</button>
      </div>
      <div class="form-group mt-md">
        <label class="form-label">测试结果:</label>
        <h4 class="text-strong">test：<span class="text-danger">{{ testValue }}</span></h4>
        <h4 class="text-strong">exec：<span class="text-danger">{{ execValue }}</span></h4>
        <h4 class="text-strong">match：<span class="text-danger">{{ matchValue }}</span></h4>
      </div>
    </div>
  </div>
</template>

<script>
/* JSON转换 */
import messager from '../../../components/messager/messager.js'

export default {
  data () {
    return {
      regs: [
        {
          text: '汉字',
          reg: /[\u4E00-\u9FA5]/
        },
        {
          text: '整数',
          reg: /^-?\d+$/
        },
        {
          text: '正整数',
          reg: /[0-9]*[1-9][0-9]*/
        },
        {
          text: '负整数',
          reg: /-[0-9]*[1-9][0-9]*/
        },
        {
          text: '小数',
          reg: /^(-?\d+)(\.\d+)?$/
        },
        {
          text: '字母',
          reg: /^[A-Za-z]+$/
        },
        {
          text: '邮箱',
          reg: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
        },
        {
          text: '网址',
          reg: /[a-zA-z]+:\/\/[^\s]*/
        },
        {
          text: 'ip地址',
          reg: /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
        },
        {
          text: 'HTML标记',
          reg: /<(.*)(.*)>.*<\/\1>|<(.*) \/>/
        },
        {
          text: '电话',
          reg: /^[0-9()]{7,30}$/
        },
        {
          text: '手机号',
          reg: /^0{0,1}(13[0-9]|15[3-9]|15[0-2]|18[0-9])[0-9]{8}$/
        },
        {
          text: '身份证号',
          reg: /^\d{15}|\d{}18$/
        },
        {
          text: '日期(年-月-日)',
          reg: /(\d{4}|\d{2})-((1[0-2])|(0?[1-9]))-(([12][0-9])|(3[01])|(0?[1-9]))/
        }
      ],
      reg: '',
      value: '',
      testValue: '',
      execValue: '',
      matchValue: ''
    }
  },

  methods: {
    /**
     * @function 执行
    */
    run () {
      let reg = ''
      try {
        reg = (new Function('return ' + this.reg))()
      } catch (e) {
        reg = ''
      }
      if (reg) {
        this.testValue = reg.test(this.value)
        this.execValue = reg.exec(this.value)
        this.matchValue = this.value.match(reg)
      } else {
        messager.error('正则表达式不正确')
      }
    }
  }
}
</script>

<style lang="less">
.text-symbol {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
  padding: 6px 6px 6px 18px;
  letter-spacing: 2px;
}
</style>
